<template>
    <div class="similar-goods">
        <div class="title">相似商品</div>
        <div class="flex">
            <div class="content" v-for="(item, index) in getData" :key="index">
                <el-image :src="getImageUrl(item.image)" style="width: 106px; height: 106px" />
                <div class="name">{{ item.name }}</div>
                <div class="flex justify-between info">
                    <div class="price">{{ item.price }}</div>
                    <div class="originPrice">{{ item.originPrice }}</div>
                    <div class="add">
                        <img class="w-[18px] h-[18px]" :src="addIcon" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type options from './options'
import addIcon from '@/assets/images/add.png'
import useAppStore from '@/stores/modules/app'

const { getImageUrl } = useAppStore()
type OptionsType = ReturnType<typeof options>
const props = defineProps({
    content: {
        type: Object as PropType<OptionsType['content']>,
        default: () => ({})
    },
    styles: {
        type: Object as PropType<OptionsType['styles']>,
        default: () => ({})
    }
})
const getData = computed(() => {
    const { data } = props.content
    return data
})
</script>

<style lang="scss" scoped>
.similar-goods {
    margin: 10px 10px 0;
    background-color: #fff;
    border-radius: 7px;
    padding-bottom: 20px;
    overflow-x: hidden;
    .title {
        @apply pl-3 pt-5 pb-[15px] text-3xl font-medium;
    }

    .content {
        position: relative;
        width: 122px;
        height: 186px;
        border-radius: 10px;
        border: 1px solid rgb(195, 195, 195);
        margin-left: 10px;
        padding: 7px;
        // padding-bottom: -10px;
        .name {
            @apply text-xs py-1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .info {
            position: absolute;
            bottom: 5px;
            .price {
                color: #ff2c3c;
                font-size: 12px;
            }
            .originPrice {
                color: #999;
                text-decoration: line-through;
                margin-right: 8px;
                font-size: 12px;
            }
            .add {
                position: absolute;
                right: -30px;
                background: #33d192;
                border-radius: 50%;
            }
        }
    }
}
</style>
